<template>
  <div class="leftbackground">
    <div class="left-container" id="left-container1">
      <!-- 标题 -->

      <div class="title-header">
        <img src="/assets/base/layerTree.png" class="icon-layertree" />
        <span><i>管廊总览</i></span>
      </div>

      <!-- 综合指标部分 -->
      <div class="metrics">
        <div class="title2">
          <span style="margin-left: 20px"><i>综合指标</i></span>
        </div>
        <div class="metrics-grid">
          <!-- 指标1 -->
          <div class="metric">
            <i class="icon total-length"></i>
            <div class="text">
              <p>管廊总长度</p>
              <span class="value">223.8</span> 公里
            </div>
          </div>

          <!-- 指标2 -->
          <div class="metric">
            <i class="icon main-line-length"></i>
            <div class="text">
              <p>干线管廊长度</p>
              <span class="value">112.3</span> 公里
            </div>
          </div>

          <!-- 指标3 -->
          <div class="metric">
            <i class="icon branch-line-length"></i>
            <div class="text">
              <p>支线管廊长度</p>
              <span class="value">56.2</span> 公里
            </div>
          </div>

          <!-- 指标4 -->
          <div class="metric">
            <i class="icon loop-line-length"></i>
            <div class="text">
              <p>缆线管廊长度</p>
              <span class="value">65.3</span> 公里
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-container" id="left-container2">
      <div class="title2">
        <span style="margin-left: 20px"><i>施工计划</i></span>
      </div>
      <div class="chart-container">
        <div id="chart" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div class="left-container" id="left-container3">
      <div class="title2">
        <span style="margin-left: 20px"><i>行政区域管理</i></span>
      </div>
      <div class="chart-container">
        <div id="chart2" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import * as echarts from "echarts"
import { onMounted } from "vue"

onMounted(() => {
  // 初始化图表实例
  const myChart = echarts.init(document.getElementById("chart")!)
  // 配置图表选项
  // 渲染图表
  myChart.setOption({
    // title: {
    //   text: "管廊施工计划",
    //   left: "center",
    //   textStyle: {
    //     color: "#ffffff",
    //     fontSize: 16,
    //   },
    // },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0, 0, 0, 0.7)",
      borderColor: "#333",
      textStyle: {
        color: "#ffffff"
      }
    },
    legend: {
      data: ["干线管廊长度", "支线管廊长度", "缆线管网长度"],
      // top: "10%",
      textStyle: {
        color: "#ffffff"
      }
    },
    grid: {
      top: "50px",
      left: "0",
      right: "20px",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["2020年", "2021年", "2022年", "2023年", "2024年"],
      axisLine: {
        lineStyle: {
          color: "#ffffff"
        }
      },
      boundaryGap: false,
      axisLabel: {
        color: "#ffffff"
      }
    },
    yAxis: {
      type: "value",
      name: "(公里)",
      nameTextStyle: {
        color: "#ffffff"
      },
      axisLine: {
        lineStyle: {
          color: "#ffffff"
        }
      },
      axisLabel: {
        color: "#ffffff"
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.2)"
        }
      }
    },
    series: [
      {
        name: "干线管廊长度",
        type: "line",
        data: [10, 20, 50, 90, 120],
        smooth: true,
        lineStyle: {
          color: "#ff4d4d"
        },
        showSymbol: false,
        areaStyle: {
          color: "rgba(255, 77, 77, 0.3)"
        },
        symbol: "none" // 禁止显示任何节点
      },
      {
        name: "支线管廊长度",
        type: "line",
        data: [5, 10, 20, 30, 40],
        smooth: true,
        lineStyle: {
          color: "#ff9900"
        },
        showSymbol: false,
        symbol: "none",
        areaStyle: {
          color: "rgba(255, 153, 0, 0.3)"
        }
      },
      {
        name: "缆线管网长度",
        type: "line",
        data: [8, 12, 18.5, 25, 32],
        smooth: true,
        lineStyle: {
          color: "#00ccff"
        },
        showSymbol: false,
        symbol: "none",
        areaStyle: {
          color: "rgba(0, 204, 255, 0.3)"
        }
      }
    ]
  })
  const chart2 = echarts.init(document.getElementById("chart2")!)
  chart2.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}%"
    },
    grid: {
      left: "15%",
      right: "15%",
      top: "10%",
      bottom: "10%"
    },
    xAxis: {
      type: "value",
      max: 100, // 最大值为100
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false } // 隐藏X轴的刻度
    },
    yAxis: {
      type: "category",
      data: ["A县", "B县", "C区", "D区", "E区"], // 逆序显示数据
      inverse: false, // 倒序排列
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: "#ffffff",
        fontSize: 14
      }
    },
    series: [
      {
        type: "bar",
        data: [35, 15, 25, 20, 50], // 数据值
        barWidth: 12, // 条形宽度
        label: {
          show: true,
          position: "right", // 右侧显示
          formatter: "{c}%", // 显示百分比
          color: "#ffffff",
          fontSize: 14
        },
        itemStyle: {
          color: function (params: any) {
            // 根据排名设置颜色
            const colors = [
              "#ffdd00", // NO.1
              "#ffaa00", // NO.2
              "#00ffcc", // NO.3
              "#409eff", // 其他
              "#409eff"
            ]
            return colors[params.dataIndex]
          }
        }
      }
    ]
  })
  // 响应式支持
  window.addEventListener("resize", () => {
    myChart.resize()
    chart2.resize()
  })
})
</script>

<style lang="less">
.leftbackground {
  background-image: url("/assets/base/leftMenuBackground.png");
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.left-container {
  height: 100%;
  width: 100%;
  color: #ffffff;
}

#left-container1 {
  //background-color: #0fcce6;
}

#left-container2 {
  //background-color: #00ff33;
}

#left-container3 {
  //background-color: #2f659a;
}

.title-header {
  height: 15%;
  width: 100%;
  background-image: url("/assets/base/title1_bg.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.icon-layertree {
  width: 24px;
  height: 24px;
  margin: 5px 8px;
}

.metrics {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.title2 {
  background-image: url("/assets/base/title2_bg.png");
  background-size: 100% 100%;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列 */
  gap: 16px; /* 每个单元格的间距 */
}

/* 单个指标样式 */
.metric {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 图标样式 */
.metric .icon {
  width: 40px;
  height: 40px;
  background-size: cover;
}

/* 每个指标的具体图标 */
.icon.total-length {
  background-image: url("/assets/base/guanxianchangdu.png"); /* 替换为实际图标路径 */
}

.icon.main-line-length {
  background-image: url("/assets/base/guandao.png");
}

.icon.branch-line-length {
  background-image: url("/assets/base/liuchengfenzhi.png");
}

.icon.loop-line-length {
  background-image: url("/assets/base/tongxunxianlan.png");
}

/* 文本样式 */
.metric .text {
  p {
    margin: 0;
    font-size: 14px;
  }

  .value {
    font-size: 18px;
    font-weight: bold;
    margin-right: 4px;
    color: #f0a500; /* 数值高亮色 */
  }
}

//左侧数据表
.chart-container {
  width: 100%;
  height: 100%;
  //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
